<script setup>
import {ref, computed} from 'vue'
import { getUserInfo } from '@/api/user'
import { getLikeList } from '@/api/good';
import useUserStore from '@/store/modules/user'

// 获取登录用户信息
const userStore = useUserStore();
console.log(userStore.id);

//分页
const pageTotal = ref(0);
const pagePages = ref(1);
const currentPage = ref(1);
const pageSize = ref(4);

// 商品列表
const goodlist = ref([]);
// 用户信息
const form = ref({});

// 获取用户信息
const getUserInfos = async () => {
  const res = await getUserInfo(userStore.id);
  console.log(res);
  form.value = res.rows[0];
  console.log(form.value);
};
getUserInfos();

const getGoodsList = async () => {
  const res = await getLikeList();
  console.log(res.data);
  goodlist.value = res.data.data.data;
  pageTotal.value = res.data.data.pageTotal;
  pagePages.value = res.data.data.pagePages;
};
getGoodsList();


// 计算当前页数据
const currentGoodlist = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return goodlist.value.slice(start, start + pageSize.value);
});
function handleSizeChange(newSize) {
    pageSize.value = newSize;
    getGoodsList()
    console.log(`每页 ${newSize} 条`)
}
function handleCurrentChange(newPage) {
    pagePages.value = newPage;
    getGoodsList()
    console.log(`当前页: ${newPage}`)
}

</script>

<template>
  <div class="home-overview">
    <!-- 用户信息 -->
    <div class="user-meta">
      <div class="avatar">
        <!-- <img :src="userStore.userInfo?.avatar" /> -->
         <!-- <img src="@/assets/images/logo.png"> -->
         <img :src="form.avatar">
      </div>
      <!-- <h4>{{ userStore.userInfo?.account }}</h4> -->
       <h4>{{ form.nickName }}</h4>
    </div>
    <div class="item">
      <a href="javascript:;">
        <span class="iconfont icon-hy"></span>
        <p><RouterLink to="/member/userCenter">会员中心</RouterLink></p>
      </a>
      <a href="javascript:;">
        <span class="iconfont icon-aq"></span>
        <p><RouterLink to="/member/userSetting">安全设置</RouterLink></p>
      </a>
      <a href="javascript:;">
        <span class="iconfont icon-dw"></span>
        <p><RouterLink to="/member/userAddress">地址管理</RouterLink></p>
      </a>
    </div>
  </div>
  <div class="like-container">
    <div class="home-panel">
      <div class="header">
        <h4 data-v-bcb266e0="">猜你喜欢</h4>
      </div>

      <div class="home-product">
          <div class="goodList-box">
            <ul class="goods-list">
              <li v-for="good in currentGoodlist" :key="good.id">
                <RouterLink :to="{name: 'gooddetail', params: {goodid: good.id}}" class="goods-item">
                <img :src="good.picture" alt="" />
                  <p class="name ellipsis">{{ good.name }}</p>
                  <p class="desc ellipsis">{{ good.desc }}</p>
                  <p class="price">&yen;{{ good.price }}</p>
                </RouterLink>
              </li>
            </ul>
            <!--分页区域-->
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[4]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="sizes,prev, pager, next, jumper"
                :total="pageTotal"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="margin-top: 30px; margin-left: 20%;"
            />
          </div>
        </div>

      <!-- <div class="goods-list">
         <GoodItem v-for="good in likeList" :key="good.id" :good="good" /> 
      </div> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-overview {
  height: 132px;
  background: url(@/assets/images/userInfo.png) no-repeat center / cover;
  display: flex;

  .user-meta {
    flex: 1;
    display: flex;
    align-items: center;

    .avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 60px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h4 {
      padding-left: 26px;
      font-size: 18px;
      font-weight: normal;
      color: rgb(0, 0, 0);
    }
  }

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &:first-child {
      border-right: 1px solid #f4f4f4;
    }

    a {
      color: #e58686;
      font-size: 16px;
      text-align: center;
      text-decoration: none;

      .iconfont {
        font-size: 32px;
      }

      p {
        line-height: 6px;
      }
    }
  }
}

.like-container {
  border-radius: 4px;
  background-color: #fff;
}

.home-panel {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 5px;
  height: 400px;

  .header {
    border-bottom: 1px solid #ffdede;
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    h4 {
      font-size: 22px;
      font-weight: 400;
    }

  }

  .goods-list {
    display: flex;
    justify-content: space-around;
  }
}


.home-product {
      background: #fff;
      margin-top: 3px;
      display: flex;

      .cover {
        width: 240px;
        height: 610px;
        margin-right: 5px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        .label {
          width: 188px;
          height: 66px;
          display: flex;
          font-size: 18px;
          color: #fff;
          line-height: 66px;
          font-weight: normal;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate3d(0, -50%, 0);

          span {
            text-align: center;

            &:first-child {
              width: 76px;
              background: rgba(0, 0, 0, 0.9);
            }

            &:last-child {
              flex: 1;
              background: rgba(0, 0, 0, 0.7);
            }
          }
        }
      }


      .goods-list {
        width: 1000px;
        display: flex;
        flex-wrap: wrap;

        li {
          width: calc(24%);
          height: 300px;
          margin-right: 10px;
          margin-bottom: 10px;

          &:nth-last-child(-n + 4) {
            margin-bottom: 0;
          }

          &:nth-child(5n) {
            margin-right: 0;
          }
        }
      }

      .goods-item {
        display: block;
        width: 220px;
        padding: 20px 30px;
        text-align: center;
        transition: all .5s;
        background: #fff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .08);


        &:hover {
          transform: translate3d(0, -3px, 0);
          box-shadow: 2px 3px 8px rgb(0 0 0 / 20%);
        }

        img {
          width: 160px;
          height: 160px;
        }

        p {
          padding-top: 10px;
        }

        .name {
          font-size: 16px;
        }

        .desc {
          color: #999;
          height: 29px;
        }

        .price {
          color: $priceColor;
          font-size: 20px;
        }
      }
    }
</style>